//定义两个上下箭头的矢量路径

var floor1ChartsData = {
  title: "设备在线情况",
  xAxis: [
    "二碳箱",
    "安全柜",
    "低温冰箱",
    "冷藏箱",
    "液氮罐",
    "摇床",
    "IFA",

  ],
  data: [
    {
      title: "在线数量",
      data: [
        63780, 59690, 45050, 67821, 15215, 12234, 20824]
    },
    {
      title: "离线数量",
      data: [245, 801, 452, 803, 111, 211, 122],
    },
  ],
};

var data2 = {
  title: "工单情况",
  xAxis: [
    "二碳箱",
    "安全柜",
    "低温冰箱",
    "冷藏箱",
    "液氮罐",
    "摇床",
    "IFA"
  ],
  data: [
    {
      title: '待处理',
      data: [150, 251, 52, 53, 54, 55, 56,]
    },
    {
      title: '已处理',
      data: [103436, 103441, 9300, 15451, 15122, 9544, 3875
      ]
    },
    {
      title: '处理中',
      data: [504, 600, 20, 75, 40, 51, 20]
    },

  ],
};

function barShow(id, type = "bar", chartData) {

  const series = chartData.data.map(({ data, title }) => {
    return {
      type,
      name: title,
      stack: "a",
      barGap: "-100%",
      barWidth: "40%",
      data: data
    }
  })



  const chartDom = document.getElementById(`${id}`);
  const myChart = echarts.init(chartDom);

  const option = {
    color: ["#018cee", "#89a0e7", "#fac858", "#ee6666", "#73c0de", "#3ba272", "#fc8452", "#9a60b4", "#ea7ccc"],
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
      },
    },
    grid: {
      height: "80%",
      top: "15%",
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        data: chartData.xAxis,
        splitLine: {
          show: false,
        },
        axisLabel: {
          interval: 0, //代表显示所有x轴标签显示
          textStyle: { fontSize: 10, color: "#ccc" },
        }
      }
    ],
    yAxis: [
      {
        type: "value",
        // name: '单位：千',
        nameLocation: 'end',
        splitLine: { lineStyle: { color: "#00345e" } },
        axisLabel: {
          textStyle: { fontSize: 12, color: "#ccc" },
          formatter: function(value) {
            return ` ${value / 1000}k`
          },
        },
        axisTick: {
          show: false,
          lineStyle: {
            color: '#00345e'
          },
        },
        axisLine: {
          show: false,
        },
      },
    ],
    series
  };
  option && myChart.setOption(option);
  window.addEventListener("resize", function() {
    myChart.resize();
  });


  let faultByHourIndex = 0;
  var faultByHourTime = setInterval(function() { //使得tootip每隔三秒自动显示
    myChart.dispatchAction({
      type: 'showTip', // 根据 tooltip 的配置项显示提示框。
      seriesIndex: 0,
      dataIndex: faultByHourIndex
    });


    faultByHourIndex++;
    if (faultByHourIndex >= series.length) {
      faultByHourIndex = 0;
    }
  }, 5000);

  window.onunload = function() {
    clearInterval(faultByHourTime)
  }

}
